<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        section{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto;
            position: relative;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            /* animation-name: divMove;
            animation-duration: 3s;
            animation-timing-function:linear; */
            /* animation-delay: 2s; */
            /* animation-iteration-count: infinite; */ /* 无限循环 */
            /* animation-direction: alternate-reverse */
            /* alternate */  /* 先正后反 */
            /* reverse */ /* 反向的 */
            animation: divMove 3s infinite;
        }
        /* 声明定义动画 */
        @keyframes divMove{
            /* 动画起始和结束的状态 */
            /* 关键字 */
            /* from{left:0;top:0;} *//* 位置 */
            /* to{left:400px;top: 0}
            to{left: 400px;top: 400px}
            to{left: 0;top: 400px}
            to{
                left: 0;top: 0
            } */
            /* 如果当前动画需要运动多次可以设置百分比方式 */
              0%{left:0;top:0;}/* 位置 */
            25%{left:400px;top: 0}
            50%{left: 400px;top: 400px}
            75%{left: 0;top: 400px}
            100%{
                left: 0;top: 0
            }
        }
        section:hover div{
            animation-play-state: paused
        }
    </style>
</head>
<body>
    <section>
        <div></div>
    </section>
</body>
</html>
<!-- 
    需求:大盒子包裹住小盒子
        - 定位
        - margin/padding
        - 浮动
        - 平移 
        - 动画
 -->
 <!-- 
    
    帧动画需要如何在项目实现？
        1.需要声明帧动画
            - 在css样式表中定义
            - @keyframes 动画的名字{动画起始和结束的状态/过程}
        2.调用动画 
            - 在css样式表中调用 - 哪个元素运动就给哪个元素添加
        注意: 
            - 是用定位属性，参照物
            - 起始位置和结束位置属性一定要相同

        动画属性的学习
            属性:animation - 简写方式
            属性值
                - animation-name 动画名字
                - animation-duration 动画运动的时间 ms s
                - animation-timing-function 动画运动的方式
                - animation-delay  延迟时间
                - animation-iteration-count 循环次数 
                    - number 数字 次数
                    - infinite  无限循环 
                - animation-direction  动画方向
                    - normal 默认值
                - animation-play-state  用户可以控制当前动画停止
                    - running 运动
                    - paused 暂停

            简写:
                属性:animation
                属性值:名字 动画时间 运动方式 循环次数 



 


        过渡和动画的区别
            - 过渡需要用户控制，浏览器发生交互
            - 动画不需要用户控制
  -->